<template>
	<div class="el-checkbox-group">
		<el-checkbox :indeterminate="isIndeterminate" v-model="checked" @change="_handleCheckAllChange">全选</el-checkbox>
		<el-checkbox v-for="(item,index) in data" :label="item" :key="index" :value="_hasItemChecked(item)"
			@change="_handleCheckedChange">
		</el-checkbox>
	</div>
</template>

<script>
	export default {
		name: 'el-checkbox-group',
		props: {
			value: {
				type: Array,
				require: false,
				default () {
					return []
				}
			},
			data: {
				type: Array,
				require: false,
				default () {
					return []
				}
			},
		},
		model: {
			prop: 'value',
			event: 'input'
		},
		data() {
			return {
				checked: true,
				isIndeterminate: true,
				checkedlist: this.value
			}
		},
		methods: {
			_handleCheckAllChange(val) {
				console.log('全选', val)
				// if(val.checked){
				// 	this.isIndeterminate = false
				// } else {

				// 	this.isIndeterminate = false
				// }
				// this.checked = val.checked;
				// this.checkedlist = val.checked ? this.data : [];
				// console.log(this.checkedlist)
				
				// this.$emit('input', this.checkedlist)
				// this.isIndeterminate = this.checkedlist != this.data;
			},
			_handleCheckedChange(val) {
				// if (val.checked) {
				// 	this.checkedlist.push(val.label)
				// } else {
				// 	const index = this.checkedlist.findIndex(item => item === val.label);
				// 	this.checkedlist.splice(index, 1);
				// }
				this.checked = false;
				console.log(this.checked)
			},
			_hasCheckAll() {
				// 验证是否全部选中
				return this.checkedlist == this.data;
			},
			_hasItemChecked(val) {
				return this.checkedlist.some(item => item == val);
			},
		}
	}
</script>

<style scoped lang="scss">
	.el-checkbox-group {
		width: 100%;
		display: flex;
		justify-items: center;
	}
</style>
